<template>
	<view class="item_wrap">
		<view class="item_bar">
			<view class="date">
				2024/06/11
			</view>
			<view class="status">
				待结算
			</view>
		</view>
		<tn-scroll-list :indicator="false">
			<img @click="go_order_detail" v-for="item in 7" :key="item" src="/static/goods/apple.jpg" alt="">
		</tn-scroll-list>


		<view class="box">
			<view class="price">
				共4件 ¥ <text>20</text>
			</view>
			<view class="">
				<tn-button size="sm" backgroundColor="tn-bg-blue" fontColor="tn-color-white"
					style="margin-right: 20rpx;">删除订单</tn-button>
				<tn-button backgroundColor="tn-bg-red" fontColor="tn-color-white" size="sm">再次购买</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['全部', '未付款', '待发货', '待收货', '待评价'],
			}
		},
		methods: {
			go_order_detail() {
				uni.navigateTo({
					url: '/pages/detail/detail'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	img {
		width: 120rpx;
		margin-right: 40rpx;
	}

	.item_wrap {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.item_bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.date {
				font-size: 30rpx;
			}

			.status {
				font-size: 30rpx;
				color: red;
			}
		}

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;

			.price {
				font-size: 30rpx;

				text {
					margin-left: 5rpx;
					font-size: 36rpx;
					font-weight: bolder;
				}
			}
		}
	}
</style>